<template>
  <div class="content">
    <userLogin
      v-if="activeName == 'code'"
      @menuClick="menuClick"
      @viewClick="viewClick"
    ></userLogin>
    <phoneLogin
      v-if="activeName == 'phone'"
      @menuClick="menuClick"
      @viewClick="viewClick"
    ></phoneLogin>
    <div class="service">
      <a href="tel://4008738828">客服电话：400-873-8828</a>
    </div>
  </div>
</template>

<script>
import userLogin from './code.vue'
import phoneLogin from './phone.vue'
import { defineComponent, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default defineComponent({
  components: {
    userLogin,
    phoneLogin,
  },
  setup() {
    const router = useRouter()
    const activeName = ref('code')

    const route = useRoute()

    return {
      activeName,
      onClickLeft() {
        history.back()
      },
      menuClick(param) {
        router.push({
          name: param.menuName,
          query: route.query,
        })
      },
      viewClick(param) {
        activeName.value = param.menuName
      },
    }
  },
  data() {},
  created() {},

  methods: {},
})
</script>

<style lang="less" scoped>
.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url('./imgs/bg2.png') no-repeat center/cover;
}

.service {
  font-size: 13px;
  width: 100vw;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);

  a {
    color: white;
  }
}
</style>
